 
<!-- Toggle Button -->
 <a href="#menu-toggle" class="btn btn-outline-link hidden-xs-down" id="menu-toggle">
     <i class="fa fa-bars" aria-hidden="true"></i>
 </a>

 <!-- Sidebar for desktop -->
 <aside class="hidden-xs-down">
     <div id="sidebar-wrapper">
        <nav class="nav nav-pills flex-sm-row p-3 justify-content-center">
            <a class="flex-sm-fill text-sm-center nav-link active" href="#sidebar-home-content" data-toggle="tab" role="tab" id="home">Home</a>
            <a class="flex-sm-fill text-sm-center nav-link hidden-xl-down" href="#sidebar-toc-content" data-toggle="tab" role="tab" id="toc">Toc</a>
        </nav>
        <div class="tab-content" id=tab-content>
            <div class="tab-pane text-sm-center active" id="sidebar-home-content">
	<br>
            <img class="site-author-image m-2" itemprop="image" src=" https://avatars3.githubusercontent.com/u/6404644?v=4&s=460">
	<br>
            <div class="text-warning">akiritsu</div>
            <br>
	    <div class="text-white text-center">A Great Magician.</div>
	<br>
                {% include nav-links.html %}
            </div>
            <div class="tab-pane fade text-sm-left" id="sidebar-toc-content">
            </div>
        </div>
    </div>
</aside>

<!-- Navbar for xsmall screen  -->
<div class="hidden-sm-up">
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">{{site.title}}</a>
        <div class="collapse navbar-collapse" id="navbarNav">
            {% include nav-links.html %}
        </div>
    </nav>
</div>
